<template>
	<view>
		<u-navbar leftText='返回' :title="dataSource.savePlan" @leftClick="leftClick" :autoBack="true">
		</u-navbar>
		<view class="clockIn_header">
			<view>
				<text>{{dataSource.savePlan}}</text>
				<text>{{dataSource.avgMoeny}}元</text>
			</view>
			<view>
				<u-line-progress :percentage="progress" activeColor="#FFC0CB"></u-line-progress>
			</view>
			<view>
				<text>已存入{{dataSource.hasMoney}}元</text>
				<text>{{progress}}%</text>
			</view>
		</view>
		<u-cell-group>
			<u-cell @click='punchCardFn(item)' v-for="item in dataSource.saveTime" :key="item.id"
				:title="dataSource.money+'元'" value="内容" :label="dataSource.saveTypeId===1||dataSource.saveTypeId===5||dataSource.saveTypeId===6?'第'+item+'天':
				dataSource.saveTypeId===4&&dataSource.saveTime===365?'第'+item+'天':	
			    dataSource.saveTypeId===4&&dataSource.saveTime===52?'第'+item+'周':
				dataSource.saveTypeId===4&&dataSource.saveTime===12?'第'+item+'月':
				dataSource.saveTypeId===2?'第'+item+'周':'第'+item+'月'
				" center></u-cell>
		</u-cell-group>
		<u-popup :show="showPopup" @close="showPopup=false">
			<view class="clockIn_punchCardFn">
				<view>存钱金额 <text>{{dataSource.money}}</text></view>
				<view>
					积少成多，为了你的存钱计划坚持下去！
				</view>
				<view>
					<u--form labelWidth='80px' labelPosition="left" :model="locationCard" :rules="rules" ref="form">
						<u-form-item label="扣款账户" prop="withhold" borderBottom @click="showAccountFn('withhold')">
							<u--input v-model="locationCard.withhold" disabled disabledColor="#ffffff"
								placeholder="请选择扣款账号" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="存款账户" prop="deposit" borderBottom @click="showAccountFn('deposit')">
							<u--input v-model="locationCard.deposit" disabled disabledColor="#ffffff"
								placeholder="请选择存款账号" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</u--form>
					<u-action-sheet :show="showAccount" :actions="actions" title="请选择账本类型" @close="showAccount = false"
						@select="accountSelect">
					</u-action-sheet>
					<u-button type="error" @click="subClockFn" text="确定"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		saveClockInfoAPI
	} from '@/api/api.js'
	export default {
		data() {
			return {
				dataSource: {},
				showPopup: false,
				showAccount: false,
				choose: '',
				locationCard: {
					withhold: '',
					deposit: ''
				},
				actions: [{
						name: '不计入账户',
					},
					{
						name: '现金账户',
					},
					{
						name: '储蓄卡',
					},
					{
						name: '微信钱包'
					},
					{
						name: '支付宝'
					}
				],
				rules: {
					'withhold': {
						type: 'string',
						required: true,
						message: '请选择扣款账户',
						trigger: ['blur', 'change']
					},
					'deposit': {
						type: 'string',
						required: true,
						message: '请选择存款账户',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		methods: {
			leftClick() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			punchCardFn(item) {
				console.log(item)
				this.showPopup = true

			},
			showAccountFn(type) {
				this.choose = type
				this.showAccount = true
			},
			accountSelect(e) {
				if (this.choose.trim() === 'withhold') {
					this.locationCard.withhold = e.name
					this.choose = ''
					this.$refs.form.validateField('withhold')
				}
				if (this.choose.trim() === 'deposit') {
					this.locationCard.deposit = e.name
					this.choose = ''
					this.$refs.form.validateField('deposit')
				}
			},
			subClockFn() {
				let clockInfo = {}
				clockInfo.withhold = this.locationCard.withhold
				clockInfo.deposit = this.locationCard.deposit
				clockInfo.money=this.dataSource.money
				clockInfo.savePlanId=this.dataSource.id
				// clockInfo.clockDate=
				this.$refs.form.validate().then( async res => {
					const resquest = await saveClockInfoAPI()
				}).catch(errors => {
					uni.$u.toast('请输入完整的信息！')
				})
			}
		},
		computed: {
			progress() {
				return Math.floor((this.dataSource.hasMoney / this.dataSource.avgMoeny) * 100)
			},
			startTime() {
				// return this.$moment(this.saveInfo.startTime).format('YYYY-MM-DD')
			},
			// clockDate(){
			// 	return 
			// }
		},
		onLoad(option) {
			if (option) {
				if (option.data) {
					this.dataSource = JSON.parse(decodeURIComponent(option.data))
					console.log(this.dataSource)
				}
			}
		}
	}
</script>

<style scoped>
	.clockIn_header {
		width: 650rpx;
		height: 200rpx;
		border: 1rpx solid #ccc;
		margin: 0 auto;
		margin-top: 120rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.clockIn_header>view {
		display: flex;
		justify-content: space-between;
	}

	.clockIn_header>view:nth-child(1) {
		font-size: 20px;
	}

	.clockIn_header>view:nth-child(3) {
		font-size: 20rpx;
		color: #ccc;
	}

	.clockIn_punchCardFn {}

	.clockIn_punchCardFn>view:nth-child(1) {
		font-size: 40rpx;
		text-align: center;
		height: 150rpx;
		line-height: 200rpx;
	}

	.clockIn_punchCardFn>view:nth-child(1)>text {
		font-size: 50rpx;
		font-weight: bolder;
		margin-left: 30rpx;
	}

	.clockIn_punchCardFn>view:nth-child(2) {
		text-align: center;
		margin-bottom: 50rpx;
		color: pink;
	}

	.clockIn_punchCardFn>view:nth-child(3)>button {
		margin: 30rpx 0;
	}
</style>
